<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<script src="../../static/js/xhr.js"></script>
<script src="../../static/js/min.js"></script>
<body>
    <h3>hello world</h3>
    <button onclick="get_xhr.get_text()">点我获取输入框的信息</button>
    <label>
        <input type="text" name="name" id="in">
    </label>
    <div><button onclick="get_xhr.get_sever_xhr()">点我获取服务器xhr</button></div>
    <div style="height: 100px;width: 100px"></div>
    {% csrf_token %}
    <div>
        <label>
            <span>用户名</span>
            <input type="text" name="username" id="username" onblur="get_xhr.get_user_check()">
            <span id="content"></span>
        </label>
    </div>
    <div>
        <label>
            <span>密码</span>
            <input type="text" name="password" id="password">
        </label>
    </div>
    <div><button onclick="get_xhr.post_user_check()">点击提交验证</button></div>
    <div id="con"></div>
    <div style="height: 100px;width: 100px"></div>

</body>
<script>
{#        创建xhr#}
{#    封装函数#}
    var get_xhr={
        get_text:function (){
        xhr=create_xhr()
        {# 创建xhr请求#}
        var name=document.getElementById('in')
        xhr.open('get','/user/get-xhr-server?name='+name.value,true)
        {#设置回调函数#}
        xhr.onreadystatechange=function(){
            if (xhr.readyState===4 && xhr.status===200){
                var content=document.getElementById('content')
                content.innerHTML=xhr.responseText
            }
        }
        {# 发送 xhr#}
        xhr.send(null);
    },
        get_sever_xhr:function (){
        xhr=create_xhr()
        {# 创建xhr请求#}
        xhr.open('get','/user/get-xhr-server',true)
        {#设置回调函数#}
        xhr.onreadystatechange=function(){
            if (xhr.readyState===4 && xhr.status===200){
                var content=document.getElementById('content')
                content.innerHTML=xhr.responseText
            }
        }
        {# 发送 xhr#}
        xhr.send(null);
    },
        get_user_check:function (){
        xhr=create_xhr()
        {# 创建xhr请求#}
        var username=document.getElementById('username')    
        var password=document.getElementById('password')    
        xhr.open('get','/user/get-xhr-server?username='
            +username.value)
        {#设置回调函数#}
        xhr.onreadystatechange=function(){
            if (xhr.readyState===4 && xhr.status===200){
                var content=document.getElementById('content')
                if (xhr.responseText !== 'ok'){
                    content.innerText=xhr.responseText
                    content.style.color="red"
                    setTimeout(function (){
                        content.style.display="none"
                    },3000)
                }
            }
        }
        {# 发送 xhr#}
        xhr.send(null);
    },
        post_user_check:function (){
            var xhr=create_xhr()
            var username=document.getElementById("username")
            var password=document.getElementById('password')
            var csrfmiddlewaretoken=$("[name='csrfmiddlewaretoken']").val()
            xhr.open('post','/user/get-xhr-server',true)
            xhr.onreadystatechange=function (){
                var con=document.getElementById('con')
                if (xhr.status === 200 && xhr.readyState ===4){
                    if (xhr.responseText === '1'){
                        con.innerText='用户注册成功'
                        setTimeout(function (){
                            con.style.display="none"
                        },3000)
                    }
                    else{
                        con.innerText='用户注册失败'
                        con.style.color="red"
                        setTimeout(function (){
                            con.style.display="none"
                        },3000)
                    }
                }
            }
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
            xhr.send("username="+username.value+"&password="+password.value+"&csrfmiddlewaretoken="+csrfmiddlewaretoken)
        },
    }
    
</script>